<template>
    <div class="articleEdit">
        <el-card class="!border-none" shadow="never">
            <el-page-header @back="goBack" class="detail-page-header">
                <template #content>
                    <!-- 显示项目名称 -->
                    <span class="text-large font-600 mr-3"> {{ type == 'add' ? '文章添加' : '文章编辑' }} </span>
                </template>
                <!-- 如果需要，可以在 PageHeader 右侧添加额外内容或操作按钮 -->
            </el-page-header>
            <el-divider />
            <el-main class="detail-page-main">
                <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto" :disabled="type != 'look' ? false : true">
                    <el-form-item label="标题" prop="title">
                        <el-input v-model="ruleForm.title" />
                    </el-form-item>
                    
                    <el-form-item label="内容" prop="content">
                        <el-input v-model="ruleForm.content" type="textarea" :rows="10" :autosize="{ minRows: 10 }"/>
                    </el-form-item>
                    <el-form-item>
                        <div style="width: 100%;display: flex;justify-content: flex-end;">
                            <el-button type="primary" @click="submitForm(ruleFormRef)">
                                提交
                            </el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </el-main>
        </el-card>
    </div>
</template>
<script lang="ts" setup>
    // 引入
    import { ref, defineProps, onMounted } from 'vue'
    import { useRoute } from 'vue-router'
    import type { FormInstance, FormRules } from 'element-plus'
    import { apiMuAddArticle, apiMuEditArticle, apiMuInfoArticle } from '@/api/article'


    // 声明
    const route = useRoute()
    const props = defineProps({
        type: {
            type: String,
            default: 'add'
        },
        articleId: {
            type: String || Number,
            default: ''
        },
        memorialId: {
            type: String || Number,
            default: ''
        }
    })

    
    interface RuleForm {
        title: string
        content: string,
        mu_id: number | string,
        id?: number
    }
    const ruleForm = ref<RuleForm>({
        title: '',
        content: '',
        mu_id: props.memorialId
    })
    const ruleFormRef = ref<FormInstance>()
    const rules = ref<FormRules>({
        title: [{ required: true, message: '请填写文章标题', trigger: 'blur' }],
        content: [{ required: true, message: '请填写文章内容', trigger: 'blur' }],
        mu_id: [{ required: true, message: '您选择的墓地有误', trigger: 'blur' }],
    })


    // 方法
    const emit = defineEmits<{
        (e: 'back-to-list', from: string): void;
    }>();
    const goBack = () => {
        emit('back-to-list', 'articleEdit');
    }

    const submitForm = async (formEl: any) => {
        if (!formEl) return
        await formEl.validate((valid: any) => {
            if (valid) {
                console.log('submit!')
                if(props.type == 'add'){
                    apiMuAddArticle(ruleForm.value).then((res) => {
                        console.log(res)
                        goBack()
                    })
                }else if(props.type == 'edit'){
                    ruleForm.value.id = Number(props.articleId)
                    apiMuEditArticle(ruleForm.value).then((res) => {
                        console.log(res)
                        goBack()
                    })
                }
            } else {
                console.log('error submit!')
                return false
            }
        })
    }    
    const resetForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        formEl.resetFields()
    }

    onMounted(async () => {
        if(props.type == 'edit' || props.type == 'look'){
            await apiMuInfoArticle({id: props.articleId}).then((res) => {
                console.log(res)
                ruleForm.value = res
            })
        }
    })
</script>
<style scoped></style>